/* css reset
    body，h3..有些浏览器的默认样式
    div..又没有
    统一一下，reset 样式重置
    *所有元素
*/
*{
    margin: 0;
    padding: 0;
}
/*
  Eric Meyer's Reset CSS v3.0.0 (https://meyerweb.com/eric/tools/css/reset/)
  License: none (public domain)
*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 建议补充：现代开发常用的全局设置 */
*, *::before, *::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* 避免图片下方出现间隙 */
}

a {
  text-decoration: none;
  color: inherit;
}

/* 业务样式 */
html, body {  
  height: 100%;
}
html {
  font-size: 10px;
  background: url('./background.jpg') bottom center no-repeat;
  background-size: contain;
}
.keys {
  display:flex; /*弹性布局*/
  min-height: 100vh;/*现代的相对单位，不同手机，高度不一样，100vh 占满整个
  不同设备间的兼容
  */
  /* background: green; 背景颜色调试法*/
  align-items: center;
  justify-content: center;
}
.key {
  /* background: red; */
  border: .4rem solid black;
  border-radius: 0.5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1.5em 0.5rem;
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.4);
  text-shadow: 0 0 .5rem black;
}  

.key h3{
  display: block;
  font-size: 4rem;

}
.key .sound{
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: #ffc600;
}
.playing{
  transform: scale(1.1);/*变基属性 放大1.1倍*/
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}